<template>
	<view class="chang-sex">
		<!-- 状态栏占位 -->
		<view class="status-bar"></view>
		<!-- #ifdef MP-WEIXIN -->
		<headBarWX title="设置性别" :show='true'></headBarWX>
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<headBarAPP title='设置性别' :showButtonMore="false"></headBarAPP>
		<!-- #endif -->

		<view class="container">
			<view class="button" :class="{'active':active_submit}" @tap="Submit()">保存</view>
			<radio-group @change="RadioChange">
				<label class="item" v-for="(item, index) in items" :key="index">
					<view>
						<radio :value="item.value" :checked="index == current" />
					</view>
					<view>{{item.value}}</view>
				</label>
			</radio-group>
		</view>
	</view>
</template>

<script>
	// 导入云对象
	const userInfo = uniCloud.importObject('userInfo', {
		customUI: true // 取消自动展示的交互提示界面
	});
	export default {
		data() {
			return {
				// 信息
				userInfo: {},
				oldSex: "",
				newSex: "",

				// 标识变量
				items: [{
					value: "男",
				}, {
					value: "女",
				}, {
					value: "保密",
				}],
				current: null,
				active_submit: false,
			}
		},
		onLoad() {
			const app = getApp();
			this.userInfo = app.userInfo;
			this.oldSex = app.userInfo.sex;
			// 账户性别信息存在
			if (this.userInfo.sex) {
				if (this.oldSex == "男") {
					this.current = 0;
				} else if (this.oldSex == "女") {
					this.current = 1;
				} else if (this.oldSex == "保密") {
					this.current = 2;
				}
			}
		},
		methods: {
			RadioChange(e) {
				const sex = e.detail.value;
				console.log(this.oldSex, sex);
				this.newSex = sex;
				if (this.oldSex != this.newSex) {
					this.active_submit = true;
				} else {
					this.active_submit = false;
				}
			},
			Submit() {
				console.log('保存');
				// 允许保存
				if (this.active_submit) {
					this.userInfo.sex = this.newSex;
					userInfo.ModifySex(this.userInfo).then(res => {
						console.log(res);
						if (res.success) {
							console.log('修改成功');
							uni.navigateBack();
						}
					});
				} else { // 不允许保存
					console.log('未激活');
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	radio-group {
		margin-top: 20rpx;
	}

	.item {
		display: flex;
		height: 80rpx;
		font-size: $font-size-m-l;
		margin-left: 40rpx;
		margin-right: 40rpx;
	}

	.button {
		position: fixed;
		top: 10rpx;
		right: 30rpx;
		width: 100rpx;
		height: 70rpx;
		display: flex;
		background-color: rgba(0, 0, 0, 0.4);
		align-items: center;
		justify-content: center;
		border-radius: 20rpx;
		color: white;
		font-size: $font-size-m-m;
	}

	.button.active {
		background-color: rgba(88, 190, 106, 1);
	}
</style>